<template>
  <div class="widgetList">
    <div class="controlList">
      <template v-for="(item, index) in widgetList">
        <fragment :key="index">
          <!-- 电话、微信客服 -->
          <div v-show="item.show_type == 'list' && item.is_show">
            <div
              class="controlItem"
              :key="index"
              v-show="item.show_type == 'list' && item.is_show"
              @click.stop="chooseWidget(item)"
              :style="{
                height:
                  item.params.picUrl == '' || !item.params.picUrl ? '40px' : '',
              }"
            >
              <img v-if="item.params.picUrl" :src="item.params.picUrl" alt="" />
            </div>
          </div>
          <!-- 弹框组件 -->
          <popup
            v-show="currentComponent.controlComName == 'widgetPopupControl'"
            :widgetList="widgetList"
          ></popup>
          <!-- 底部导航 -->
          <footNav
            :widgetList="widgetList"
            :pageList="pageList"
            :systemPages="systemPages"
            @chooseWidget="chooseWidget"
            @handleTabChange="handleTabChange"
          ></footNav>
        </fragment>
      </template>
    </div>
  </div>
</template>

<script>
import popup from "./popup.vue";
import footNav from "./footNav.vue";

export default {
  props: {
    widgetList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    pageList: {
      type: Array,
      default: [],
    },
    systemPages: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {};
  },
  components: {
    popup,
    footNav,
  },
  computed: {
    showTypeListData() {
      let data = this.widgetList.filter((d) => {
        return d.show_type == "list";
      });
      return data;
    },
    showTypeWindowData() {
      let [item] = this.widgetList.filter((d) => {
        return d.show_type == "window";
      });
      return item || {};
    },
    currentComponent() {
      return this.$diyObser.store.currentComponent;
    },
  },
  watch: {},

  methods: {
    chooseWidget(e) {
      console.log(e);
      this.$emit("chooseMoudle", { item: e });
    },
    handleTabChange(e) {
      this.$emit("changePage", e);
    },
  },
  mounted() {
    console.log(this.widgetList, "12131232");
  },
};
</script>

<style lang="scss" scoped>
.widgetList {
  position: absolute;
  z-index: 100;
  right: 20px;
  bottom: 50px;
  .controlList {
    display: flex;
    flex-direction: column;
    .controlItem {
      position: relative;
      margin-bottom: 15px;
      width: 40px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .controlItem:hover::before {
      cursor: pointer;
      content: "\e657";
      font-family: "iconfont";
      position: absolute;
      right: 0;
      top: 0;
      width: 20px;
      height: 20px;
      background-color: #1890fc;
      border-radius: 0 0 0 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #fff;
    }
    .controlItem:hover::after {
      cursor: pointer;
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      border: 1px solid #1890fc;
    }
  }
}
</style>
